<!DOCTYPE html>
<html lang="en">
	<head>
		<title>nTube: Playlist</title>
		<meta name="application-name" content="nTube" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=1" />
		<meta name="description" content="nTube: Playlist." />
		<meta charset="UTF-8" />
		<meta name="robots" content="noindex, nofollow" />
		<meta name="theme-color" content="#282828" />
		<link rel="manifest" href="/manifest.json" />
		<link rel="preload" href="resources/promise-queues.js" as="script" />
		<link rel="preload" href="resources/libWeb.js" as="script" />
		<link rel="preload" href="resources/settings.js" as="script" />
		<link rel="preload" href="resources/base.js" as="script" />
		<link rel="apple-touch-icon" href="/resources/logos/ntube-logo-192.png" />
		<script src="resources/promise-queues.js"></script>
		<script src="resources/libWeb.js"></script>
		<script src="resources/settings.js"></script>
		<script src="resources/base.js"></script>
		<script src="resources/search.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/search.css" />
		<link rel="stylesheet" type="text/css" href="resources/base.css" />
		<link rel="search" type="application/opensearchdescription+xml" title="Search not(You)Tube." href="/nsearch.xml" />
		<style id="poly-item-css">
			.poly-item {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(255, 255, 255, 0.11), 0 10px 10px rgba(255, 255, 255, 0.08);
				border: 1px solid white;
				margin-bottom: 10px;
			}
		</style>
		<style id="body-css">
			body {
				background-color: black;
				color: white;
			}
		</style>
		<style>
			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid green;
				margin-right: 0px;
				z-index: 15;
				display: flex;
			}

			.menu-item {
				flex: 1;
				max-width: 50%;
				overflow: hidden;
				white-space: nowrap;
			}

			.poly-item-light {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
				border: 1px solid black;
				margin-bottom: 10px;
			}

			@-webkit-keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}

			@-moz-keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}

			@keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}
		</style>
		<style id="_css_fonts">
			html {
				font-family: -apple-system, BlinkMacSystemFont, "Product Sans", "Google Sans", "Segoe UI", "Arial", sans-serif;
			}
		</style>
	</head>

	<body>
		<div id="-ntube-menu" class="menu">
			<div class="menu-item">
				<p style="padding-left: 5px; margin-top: 5px; vertical-align: middle; font-weight: bold; display: inline-block; margin-right: 15px; width: auto">
					<span style="color: red">n</span><span id="ntube_main_menu_tube_label" style="color: lightgreen">Tube</span>
					<sub id="ntube_version_main_menu_label" style="font-size: 0.9em; line-height: 25%">1.5.0</sub>
					<img id="ntube-winter-logo" src="resources/events/christmas.png" title="Merry Christmas!" decoding="async" />
				</p>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/" title="Home Page">
						<img src="resources/icons/home.svg" alt="home" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/trending" title="Trending Videos">
						<img src="resources/icons/trending.svg" alt="trending" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 3px">
					<a href="/settings" title="Settings">
						<img src="resources/icons/settings.svg" alt="settings" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
			</div>
			<div class="menu-item">
				<div style="height: 100%; display: flex">
					<style>
						#search_overlay {
							z-index: 8;
							position: fixed;
							background-color: rgba(0, 0, 0, 0.95);
							width: 100%;
							height: 100%;
							top: 0px;
							left: 0px;
						}

						.search_hidden {
							display: none;
							visibility: hidden;
						}

						#search_bar {
							background-color: inherit;
							color: inherit;
							border: none;
							border-left: 1px solid green;
							height: 100%;
							transition: border-bottom 0.5s ease-in-out;
							font-family: monospace;
							font-size: large;
							text-indent: 5px;
							flex-grow: 1;
							min-width: 50%;
						}

						#search_bar:focus {
							border-bottom: 1px solid green;
						}

						#search_button {
							border: none;
							border-left: 1px solid rgba(0, 128, 0, 0.7);
							border-right: none;
							height: 100%;
							background-color: inherit;
							color: inherit;
							margin-right: 0px;
							font-family: inherit;
						}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." />
					<button id="search_button" onclick="search_start(null);">Search</button>
				</div>
			</div>
			<script>
				run_promise(function () {
					SearchBar.init();
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div id="search_overlay" class="search_hidden">
			<div style="padding-bottom: 30px"></div>
			<!--search_hidden-->
			<div style="width: 100%">
				<div style="float: left; padding-left: 5px">
					<h1 style="margin-top: 5px; margin-bottom: 5px">Search.</h1>
					<h3 style="margin-top: 5px; margin-bottom: 10px">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right; padding-right: 15px; padding-top: 15px">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 30px); height: 78%; margin-right: 0px; overflow-y: auto; margin-left: 5px">
				<div class="search-item">
					<a class="search-link" href="#gotoShittyVideo">
						<img decoding="async" src="" alt="TOTALLY NOT CLICKBAIT" style="padding-left: 5px; display: inline; vertical-align: middle; width: 220px; height: 160px; margin-bottom: 5px" />
						<div style="padding-left: 15px; display: inline; vertical-align: middle">
							<p style="position: absolute; display: inline; vertical-align: middle; font-size: large; margin-top: 15px">CLICKBAIT TITLE</p>
							<p style="position: absolute; display: inline; vertical-align: bottom; font-size: small; margin-top: 45px">00:00 | -1 | <a href="#gotoShittyChannel">CHANNEL #2492049</a></p>
						</div>
					</a>
				</div>
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
				id("_search_results").innerHTML = "";
			</script>
		</div>
		<div style="padding-bottom: 30px"></div>
		<div class="poly-item" style="border-color: orange">
			<h2 style="margin-top: 5px; margin-bottom: 5px">Experimental.</h2>
			<p style="margin-top: 5px; margin-bottom: 5px">This page is not fully complete and may suffer from minor issues.</p>
		</div>
		<h2 id="-playlist-title" style="margin-top: 5px; margin-bottom: 5px">Playlist.</h2>
		<style>
			.video {
				width: calc(50% - 5px);
				display: inline-flex;
				flex: 1;
				flex-basis: calc(50% - 5px);
			}

			.video_idiv {
				display: table-cell;
				margin: auto 0px;
			}

			.video_poly {
				padding-left: 0px !important;
				margin-right: 2px;
				margin-bottom: 2px !important;
			}

			@media only screen and (max-width: 600px) {
				.video {
					flex-basis: 100vw !important;
					width: 100% !important;
				}
			}

			@media only screen and (min-width: 1921px) {
				.video {
					flex-basis: 32vw !important;
					width: 32% !important;
				}
			}
		</style>
		<div id="-playlist"></div>
		<style id="ntube-custom-css"></style>
		<script>
			function hasSettings() {
				try {
					const y = Settings.load("ntube_settings");
					return y !== null && isJson(y);
				} catch (e) {
					console.error(e);
					return false;
				}
			}
			try {
				nTube.init();
				nTube.initTheming();
			} catch (e) {}
			console.debug("Loading settings...");
			const setObject = nTubeSettings.auto();
			window.__SETTINGS_OBJECT = setObject;
			window.Config = window.__SETTINGS_OBJECT; // COMPAT HACK
			run_promise(function () {
				if (window.__SETTINGS_OBJECT.appearance.enable_new_look) {
					id("poly-item-css").innerHTML =
						".poly-item {padding-left: 5px; box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 10px;}";
					try {
						id("collapsible-css").innerHTML = ".active, .collapsible:hover {background-color: rgba(80, 80, 80, 0.3);}";
					} catch (e) {}
				}
				if (window.__SETTINGS_OBJECT.appearance.custom_css) {
					try {
						id("ntube-custom-css").innerHTML = base64Decode(window.__SETTINGS_OBJECT.appearance.custom_css);
					} catch (e) {
						console.error(e);
					}
				}
				if (window.__SETTINGS_OBJECT.appearance.use_newer_ui_preset) {
					try {
						id("body-css").innerHTML = "body {background-color: #111111; color: white;}";
					} catch (e) {
						console.error(e);
					}
				}
			});
			run_promise(function () {
				id("-playlist-title").innerText = "Playlist...";
				const playlistID = getQueryVariable("list");
				if (playlistID === null || playlistID === undefined) {
					alert("Failed to get the playlist.\nNo playlist ID was provided.");
					return;
				}
				request(
					"/api/get_page",
					JSON.stringify({ page: "playlist", id: playlistID }),
					function (error) {
						alert("Failed to get the playlist.\nCheck your browser console for more info.");
						console.error(error);
					},
					function (data) {
						const o = JSON.parse(data);
						if (o["result"]) {
							const videos = o["result"]["entries"];
							const vidDiv = document.createElement("div");
							vidDiv.classList.add("poly-item");
							const vidHd = document.createElement("h2");
							vidHd.innerText = "Videos";
							vidHd.style.marginTop = "5px";
							vidHd.style.marginBottom = "5px";
							vidDiv.appendChild(vidHd);
							const vids = document.createElement("div");
							vids.style.width = "100%";
							vids.style.paddingBottom = "10px";
							vids.style.display = "flex";
							vids.style.flexDirection = "row";
							vids.style.flexWrap = "wrap";
							vidDiv.appendChild(vids);
							for (var i = 0; i < videos.length; i++) {
								const vid = videos[i];
								const videoDiv = document.createElement("div");
								videoDiv.classList.add("poly-item", "video", "video_poly");
								const link1 = document.createElement("a");
								link1.href = "/watch?v=" + vid.videoID + "&list=" + playlistID + "&index=" + vid.index;
								const image2 = document.createElement("img");
								image2.style.verticalAlign = "middle";
								image2.style.display = "table-row";
								image2.style.width = "160px";
								image2.style.height = "90px";
								image2.loading = "lazy";
								image2.decoding = "async";
								image2.referrerPolicy = "no-referrer";
								if (vid["ani_thumb"]) {
									const im = vid.thumbnail;
									const ia = vid.ani_thumb;
									image2.src = im;
									image2.onmouseover = function () {
										image2.src = ia;
									};
									image2.onmouseout = function () {
										image2.src = im;
									};
								} else {
									image2.src = vid.thumbnail;
								}
								link1.appendChild(image2);
								videoDiv.appendChild(link1);
								var contentDiv = document.createElement("div");
								contentDiv.classList.add("video_idiv");
								contentDiv.style.verticalAlign = "middle";
								contentDiv.style.paddingLeft = "5px";
								contentDiv.style.paddingRight = "5px";
								var videoTitle = document.createElement("h3");
								videoTitle.style.verticalAlign = "middle";
								videoTitle.style.margin = "0px auto";
								videoTitle.innerHTML = vid.title;
								contentDiv.appendChild(videoTitle);
								var videoDescription = document.createElement("p");
								videoDescription.style.verticalAlign = "bottom";
								videoDescription.style.margin = "0px";
								videoDescription.style.fontSize = "small";
								videoDescription.innerHTML = vid.author;
								videoDescription.innerHTML += " &centerdot; ";
								if (vid.duration == -2) {
									videoDescription.innerHTML += "LIVE";
								} else if (vid.duration == -3) {
									videoDescription.innerHTML += "UPCOMING";
									if (vid["startTime"]) {
										videoDescription.innerHTML += " &centerdot; " + nTubeUtils.Times.timeSince(new Date(vid["startTime"] * 1000)).substring(1) + " remaining.";
									}
								} else {
									videoDescription.innerHTML += seconds2time(vid.duration);
								}
								videoDescription.innerHTML += " &centerdot; #" + vid.index;
								contentDiv.appendChild(videoDescription);
								videoDiv.appendChild(contentDiv);
								vids.appendChild(videoDiv);
							}
							id("-playlist").appendChild(vidDiv);
							id("-playlist-title").innerText = o["result"]["title"];
						} else {
							alert("Failed to get the playlist.\nCheck your browser console for more info.");
							console.error("Failed to find the result!");
							console.debug(data);
						}
					}
				);
			});
		</script>
	</body>
</html>
